<template>
  <!-- 文章具体内容显示详情内容 -->
  <div class="article-content" id="article-content">
    <div id="article-content-page-header">
      <el-page-header @back="goBack" content="详情页面" />
    </div>
    <div>
      <h2>{{ articleBrief.title }}</h2>
    </div>
    <div style="margin-bottom:8px">
      <span>作者：</span><span>&ensp;{{ articleBrief.author }}</span>
      <span>&ensp;&ensp;&ensp;</span> 
      <span>&ensp;{{ articleBrief.issueTime }}</span>
    </div>
    <mavon-editor v-model="articleBrief.content" :editable="false" :defaultOpen="'preview'"
      :subfield="false" :toolbarsFlag="false"/>
    <!-- 文章具体内容 -->
    <div class="article-content-footer">
      <span
        >&ensp;<i class="el-icon-view"
          >浏览&ensp;{{ articleBrief.glanceNum }}</i
        ></span
      >
      <span>&ensp;&ensp;</span>
      <span
        >&ensp;<i class="el-icon-chat-dot-round"
          >评论&ensp;{{ articleBrief.commentNum }}</i
        ></span
      >
      <span>&ensp;&ensp;</span>
      <span
        >&ensp;<i class="el-icon-star-off"
          >收藏&ensp;{{ articleBrief.collectNum }}</i
        ></span
      >
      <span>&ensp;&ensp;</span>
      <span>&ensp;<i class="el-icon-share">分享</i></span>
      <span>&ensp;&ensp;</span>
      <span><i class="el-icon-warning-outline">举报</i></span>
      <span>&ensp;&ensp;</span>
      <span
        id="pay-attention-span"
        ref="payRef"
        @click="payAttentionClick"
        @mouseover="payAttentionMouseOver"
        @mouseleave="payAttentionMouseLeave"
        :style="payAttentionStyle"
      >
        关注
      </span>
    </div>
    <div class="article-content-comment">
      <!-- 发表评论区 -->
      <el-input
        type="textarea"
        placeholder="请输入内容"
        maxlength="120"
        :rows="3"
        resize="none"
        show-word-limit
        v-model="commentModel"
      />
      <el-row>
        <el-button @click="commentCommit">发表评论</el-button>
      </el-row>
    </div>
    <div
      class="article-content-comment-list"
      id="article-content-comment-list"
      v-for="(comment, index) in comments"
      :key="'comment_' + index"
    >
      <!-- 评论显示区 -->
      <el-divider />
      <el-row>
        <el-avatar
          :size="30"
          src="http://online.sccnn.com/img2/5890/coff160524-04.png"
        />
        <span>
          &ensp;
          <span class="article-content-comment-list-author">李华</span>
          &ensp;
          <span class="article-content-comment-list-issueTime"
            >{{ new Date().getFullYear() }}/{{ new Date().getMonth() + 1 }}/{{
              new Date().getDate()
            }}&ensp;{{ new Date().getHours() }}:{{ new Date().getMinutes() }}:{{
              new Date().getSeconds()
            }}</span
          >
        </span>
        <div class="article-content-comment-single">
          <p>{{ comment }}</p>
        </div>
        <div class="article-content-comment-reply">
          <span>
            <span @click="commentReply(index)">回复</span>
            <span v-show="commentReplys.length">&ensp;·&ensp;</span>
            <span
              :ref="index"
              @click="openCommentReply(index)"
              v-show="commentReplys.length"
              >{{ commentReplys.length }}条回复<i class="el-icon-arrow-down"
            /></span>
          </span>
          <span>
            <span>144&ensp;<svg-icon icon-class="click" />点赞</span>
            &ensp;
            <span><i class="el-icon-warning-outline">举报</i></span>
          </span>
          <vue-ueditor-wrap
            :ref="'ueditor_' + index"
            id="vue-ueditor"
            v-model="replyContent"
            @ready="ready"
          />
          <!-- 回复区 -->
          <div
            class="article-content-comment-reply-list"
            :ref="'replyList_' + index"
          >
            <el-row
              v-for="(commentReply, replyIndex) in commentReplys"
              :key="'reply_' + replyIndex"
            >
              <el-avatar
                :size="30"
                src="http://online.sccnn.com/img2/5890/coff160524-02.png"
              />
              <span>
                &ensp;
                <span class="article-content-comment-list-author">张宏</span>
                &ensp;
                <span class="article-content-comment-list-issueTime"
                  >{{ new Date().getFullYear() }}/{{
                    new Date().getMonth() + 1
                  }}/{{ new Date().getDate() }}&ensp;{{
                    new Date().getHours()
                  }}:{{ new Date().getMinutes() }}:{{
                    new Date().getSeconds()
                  }}</span
                >
              </span>
              <div class="article-content-comment-single">
                <span v-html="commentReply" />
              </div>
              <div class="article-content-comment-reply">
                <span>
                  <span>回复</span>
                </span>
                <span>
                  <span>132&ensp;<svg-icon icon-class="click" />点赞</span>
                  &ensp;
                  <span><i class="el-icon-warning-outline">举报</i></span>
                </span>
              </div>
            </el-row>
          </div>
        </div>
      </el-row>
    </div>
    <el-row>
      <!-- 底部内容 -->
      <el-divider />
      <el-row>
        <el-row>
          <el-col :span="4" :push="2">
            <b>网站相关</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>常用链接</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>联系我们</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>关注我们</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>内容许可</b>
          </el-col>
        </el-row>
        <el-row class="footer-item-content1">
          <el-col :span="4" :push="2">
            <div>关于我们</div>
            <div>服务条款</div>
            <div>帮助中心</div>
            <div>编辑器语法</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>百年智教育</div>
            <div>百年智论坛</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>联系我们</div>
            <div>加入我们</div>
            <div>建议反馈</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>微博</div>
            <div>twitter</div>
          </el-col>
          <el-col :span="4" :push="2">
            除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0
            国际许可协议 (CC BY-NC-ND 4.0) 进行许可
            <p>本站由 百年智教育 提供更新服务</p>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="footer-item-content2">
        Copyright © 2020 百年智集团 当前版本 0.0.1
      </el-row>
    </el-row>
    <div id="end"></div>
  </div>
</template>
<script>
export default {
  name: "Content",
  data() {
    return {
      articleBrief: this.$route.query,
      content: "",
      // 关注按钮样式
      payAttentionStyle: "color: white; background-color: red;",
      // 评论内容
      commentModel: "",
      // 评论列表
      comments: [],
      // 回复列表
      commentReplys: [],
      // 回复内容
      replyContent: "",
      replyRef: null,
      openReplyRef: null,
      replyListRef: null,
    };
  },
  mounted() {
    window.scrollTo(0, 0);
  },
  created() {
    this.getContent();
  },
  methods: {
    //获取文章内容
    getContent() {
      this.$http
        .get(
          `http://localhost:9999/article/article/findArticleContentById/${this.articleBrief.id}`
        )
        .then((res) => {
          if (!res.data.code) {
              //console.log(res.data.data)
            this.content = res.data.data;
            this.articleBrief.content=res.data.data;
          }
        });
    },

    // 点击返回触发事件
    goBack() {
      this.$router.go(-1);
    },
    // 回复区触发事件
    ready(editor) {
      var _this = this;
      editor.addListener("keydown", function (type, event) {
        if (event.keyCode == 13) {
          event.cancelBubble = true;
          // 阻止默认百度富文本编辑框事件
          event.preventDefault();
          event.stopPropagation();
          _this.replyCommit();
        }
      });
    },
    // 回复内容提交
    replyCommit() {
      console.log(this.replyContent);
      // 将回复内容添加到回复列表下
      this.commentReplys.push(this.replyContent);
      // 清空回复框内容
      this.replyContent = null;
      // 关闭当前回复框
      this.replyRef.$el.style.display = "none";
      // 显示回复列表
      this.openReplyRef.innerHTML = '收起回复<i class="el-icon-arrow-up"/>';
      this.replyListRef.style.display = "block";
    },
    // 点击“回复”触发事件
    commentReply(ref) {
      this.replyRef = this.$refs["ueditor_" + ref][0];
      this.openReplyRef = this.$refs[ref][0];
      this.replyListRef = this.$refs["replyList_" + ref][0];
      if (this.$refs[ref][0].offsetParent == null) {
        this.$refs["ueditor_" + ref][0].$el.style.display = "block";
      } else {
        // 关闭其它回复框
        let replyRefsSize = this.comments.length;
        for (let i = 0; i < replyRefsSize; i++) {
          if (i != ref) {
            if (
              this.$refs[i][0].offsetParent.lastChild.lastChild
                .previousElementSibling.style.display == "block"
            ) {
              this.$refs[
                i
              ][0].offsetParent.lastChild.lastChild.previousElementSibling.style.display =
                "none";
            }
          }
        }
        this.$refs[
          ref
        ][0].offsetParent.lastChild.lastChild.previousElementSibling.style.display =
          "block";
        if (this.$refs[ref][0].innerText.indexOf("收起") != -1) {
          this.$refs[ref][0].innerHTML =
            this.commentReplys.length + '条回复<i class="el-icon-arrow-down"/>';
          this.$refs[ref][0].offsetParent.lastChild.lastChild.style.display =
            "none";
        }
      }
    },
    // 点击“发表评论”按钮触发事件
    commentCommit() {
      this.comments.push(this.commentModel);
      this.commentModel = "";
      document.getElementById("end").scrollIntoView();
    },
    // 点击回复列表触发事件
    openCommentReply(ref) {
      if (
        this.$refs[ref][0].offsetParent.lastChild.lastChild
          .previousElementSibling.style.display == "block"
      ) {
        this.$refs[
          ref
        ][0].offsetParent.lastChild.lastChild.previousElementSibling.style.display =
          "none";
      }
      if (this.$refs[ref][0].innerText.indexOf("收起") == -1) {
        this.$refs[ref][0].innerHTML = '收起回复<i class="el-icon-arrow-up"/>';
        this.$refs[ref][0].offsetParent.lastChild.lastChild.style.display =
          "block";
      } else {
        this.$refs[ref][0].innerHTML =
          this.commentReplys.length + '条回复<i class="el-icon-arrow-down"/>';
        this.$refs[ref][0].offsetParent.lastChild.lastChild.style.display =
          "none";
      }
    },
    // 点击关注按钮触发事件
    payAttentionClick() {
      if (this.$refs.payRef.innerText == "关注") {
        this.$refs.payRef.innerText = "已关注";
        this.payAttentionStyle = "color: white; background-color: pink;";
      } else {
        this.$refs.payRef.innerText = "关注";
        this.payAttentionStyle = "color: white; background-color: red;";
      }
    },
    // 鼠标悬浮关注按钮时触发事件
    payAttentionMouseOver() {
      if (this.$refs.payRef.innerText == "已关注") {
        this.$refs.payRef.innerText = "取消关注";
        this.payAttentionStyle = "color: white; background-color: red;";
      }
    },
    // 鼠标离开关注按钮时触发事件
    payAttentionMouseLeave() {
      if (this.$refs.payRef.innerText == "取消关注") {
        this.$refs.payRef.innerText = "已关注";
        this.payAttentionStyle = "color: white; background-color: pink;";
      }
    },
  },
};
</script>
<style>
.footer-item-content1 {
  margin-top: 1%;
  font-size: 14px;
}
.footer-item-content2 {
  font-size: 14px;
  color: gray;
  text-align: center;
}
#article-content-page-header {
  height: 48px;
  -webkit-box-shadow: 0px 3px 3px #c8c8c8;
  -moz-box-shadow: 0px 3px 3px #c8c8c8;
  box-shadow: 0px 3px 3px #c8c8c8;
}
#article-content-page-header > .el-page-header {
  line-height: 48px;
}
#vue-ueditor {
  width: 100%;
  margin-top: 2%;
  display: none;
}
.article-content-comment-reply-list > .el-row {
  width: 100%;
  margin-left: 0%;
  margin-top: 2%;
}
.article-content-comment-reply-list {
  display: none;
}
.article-content-comment-reply-list > .el-row > .el-avatar {
  vertical-align: middle;
}
#pay-attention-span {
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 3px 3px rgb(128, 128, 128);
  -moz-box-shadow: 0px 3px 3px rgb(128, 128, 128);
  box-shadow: 0px 3px 3px rgb(128, 128, 128);
}
.article-content-comment-reply > span:nth-child(2) {
  cursor: pointer;
  float: right;
  color: rgb(128, 128, 128);
}
.article-content-comment-reply > span:nth-child(1) {
  cursor: pointer;
  color: rgb(55, 134, 224);
}
.article-content-comment-reply span > i {
  font-weight: bold;
}
.article-content-comment-list-author {
  color: rgb(55, 134, 224);
}
.article-content-comment-list-issueTime {
  color: #909399;
}
.article-content-comment-list > .el-row {
  width: 100%;
  margin-left: 0%;
}
.article-content-comment-list > .el-row > .el-avatar {
  vertical-align: middle;
  cursor: pointer;
}
.article-content-comment-single,
.article-content-comment-reply {
  margin-left: 5%;
}
.article-content-comment-single p,
.article-content-comment-reply p {
  text-indent: 0px;
  line-height: 0px;
}
.article-content-comment-list {
  margin-top: 2%;
}
.article-content-comment .el-row {
  width: 100%;
}
.article-content-comment .el-button {
  float: right;
  background: gray;
  color: white;
}
.article-content-comment {
  border: 1px solid #c8c8c8;
  margin-top: 3%;
  background: #c8c8c8;
}
.article-content-footer > span {
  color: gray;
}
.article-content-footer > span > i {
  cursor: pointer;
}
.article-content > div:nth-child(2),
.article-content > div:nth-child(3) {
  text-align: center;
}
.article-content-footer {
  padding-left: 32px;
  height: 36px;
  line-height: 36px;
  vertical-align: middle;
  background: rgb(230, 236, 230);
  -webkit-box-shadow: 0px 3px 3px #c8c8c8;
  -moz-box-shadow: 0px 3px 3px #c8c8c8;
  box-shadow: 0px 3px 3px #c8c8c8;
}
.article-content {
  width: 72%;
  margin: 3% auto;
}
p {
  text-indent: 32px;
  line-height: 24px;
}
</style>